<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>Google Maps JavaScript API v3 Example: Custom Controls</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=places&sensor=false"></script>
<style>
  body{
	text-align:center;
  }
  #map_canvas{
	margin: 20px auto;
	border: 1px dashed #C0C0C0;
	width: 800px;
	height: 500px;
  }
</style>

<script type="text/javascript">
  //将变量设置为全局变量方便方法调用
  var map;

	function MySearchBar(searchDiv, map) {
		//设置控件的外层样式
		searchDiv.style.padding='5px';
		//searchDiv.style.border='1px solid #FF0000';
		
		// Set CSS for the control border
		var searchUI = document.createElement('DIV');
		searchUI.style.backgroundColor = 'white';
		searchUI.style.border = '1px solid white';
		searchDiv.appendChild(searchUI);

		// Set CSS for the control interior
		var searchIput = document.createElement('DIV');
		searchIput.style.paddingLeft = '4px';
		searchIput.style.paddingRight = '4px';
		searchIput.innerHTML = "<B>Search:<\B>"+"<input id='searchTextField' type='text' size='50'>"+
		"<img src='images/query.png' margin = '20px' alt='查找'>";
		searchUI.appendChild(searchIput);

		google.maps.event.addDomListener(searchIput,'domready',function(){
			var input1 = document.getElementById('searchTextField');
			alert('该功能还没有完成');
		});
	}

  function initialize() {
    var latlng = new google.maps.LatLng(30.33508, 114.17211);
    var myOptions = {
      zoom: 10,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
		
		//创建一个控件的DIV，
		var searchDiv = document.createElement('DIV');
		var mySearchBar = new MySearchBar(searchDiv,map);
		
		//设置控件索引，API将按照index属性的顺序将控件放在每个位置，并会首先放置索引值较低的控件。
		searchDiv.index = 1;
		//将空间按照位置顺序添加到地图上去
		map.controls[google.maps.ControlPosition.TOP_RIGHT].push(searchDiv);

		var input = document.getElementById('searchTextField1');
    var autocomplete = new google.maps.places.Autocomplete(input);
		autocomplete.bindTo('bounds', map);
		var infowindow = new google.maps.InfoWindow();
		var marker = new google.maps.Marker({
			map: map
		});

		google.maps.event.addListener(autocomplete, 'place_changed', function() {
			infowindow.close();
			var place = autocomplete.getPlace();
			if (place.geometry.viewport) {
				map.fitBounds(place.geometry.viewport);
			} else {
				map.setCenter(place.geometry.location);
				map.setZoom(17); 
			}

			var image = new google.maps.MarkerImage(
					place.icon,
					new google.maps.Size(71, 71),
					new google.maps.Point(0, 0),
					new google.maps.Point(17, 34),
					new google.maps.Size(35, 35));
			marker.setIcon(image);
			marker.setPosition(place.geometry.location);

			var address = '';
			if (place.address_components) {
				address = [(place.address_components[0] &&
										place.address_components[0].short_name || ''),
									 (place.address_components[1] &&
										place.address_components[1].short_name || ''),
									 (place.address_components[2] &&
										place.address_components[2].short_name || '')
									].join(' ');
			}

			infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address);
			infowindow.open(map, marker);
		});
  }
</script>
</head>
<body onload="initialize()">
	<div>
		<input id="searchTextField1" type="text" size="50">
	</div>
  <div id="map_canvas"></div>
</body>
</html>